<template>
  <view class="container">
    <!-- 顶部搜索栏 -->
    <view class="search-bar">
      <input 
        type="text" 
        placeholder="请输入关键词" 
        class="search-input"
        @input="onSearchInput"
      />
      <button class="search-btn">
		  <image class="search-icon" src="../../static/icon/search.png"></image>
	  </button>
    </view>

    <!-- 轮播图 -->
    <swiper class="banner-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
      <swiper-item v-for="(item, index) in banners" :key="index">
        <image :src="item.image" mode="aspectFill" class="banner-image"></image>
      </swiper-item>
    </swiper>

    <!-- 快捷功能入口 -->
    <view class="quick-actions">
      <view class="action-item" v-for="(item, index) in quickActions" :key="index" @tap="goTo(item.page)">
        <image :src="item.icon" class="action-icon"></image>
        <text class="action-text">{{ item.name }}</text>
      </view>
    </view>

    <!-- 平台公告 -->
    <view class="section-header">
      <text class="section-title">平台公告：</text>
      <text class="section-more" @tap="gotoAnnouncements">更多 ></text>
    </view>
    <view class="announcement-card">
      <text class="announcement-title">第14届北京法治宣传周将于4月22-25日举行</text>
      <text class="announcement-date">发布于 2025-04-18</text>
    </view>

    <!-- 优质机构推荐 -->
    <view class="section-header">
      <image src="/static/star.png" class="star-icon" />
      <text class="section-title">优质机构</text>
      <text class="section-more" @tap="gotoInstitutions">更多 ></text>
    </view>
    <view class="institution-list">
      <view class="institution-item" v-for="item in institutions" :key="item.id">
        <image :src="item.avatar" class="institution-avatar"></image>
        <text class="institution-name">{{ item.name }}</text>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'home',
      banners: [
        { image: '/static/banner/1.webp' },
        { image: '/static/banner/2.jpg' },
        { image: '/static/banner/3.webp' }
      ],
      quickActions: [
        { name: '法律条款', icon: '/static/icon/law.png', page: 'lawQuery' },
        { name: '法律咨询', icon: '/static/icon/consult.png', page: 'consult' },
        { name: '法考模拟', icon: '/static/icon/exam.png', page: 'mockExam' },
        { name: '案件查询', icon: '/static/icon/case.png', page: 'caseQuery' },
		{ name: '常用文书', icon: '/static/icon/document.png', page: 'document' },
		{ name: '法律援助', icon: '/static/icon/aid.png', page: 'legalAid' },
		{ name: '庭审直播', icon: '/static/icon/live.png', page: 'courtLive' },
		{ name: '普法课堂', icon: '/static/icon/classroom.png', page: 'classroom' },
      ],
      institutions: [
        { id: 1, name: '正义律师事务所', avatar: '/static/institution/1.webp' },
        { id: 2, name: '明德法律援助中心', avatar: '/static/institution/2.webp' },
        { id: 3, name: '知行法律工作室', avatar: '/static/institution/3.webp' },
        { id: 4, name: '法治先锋团队', avatar: '/static/institution/4.webp' }
      ]
    };
  },
  methods: {
    onSearchInput(e) {
      console.log('搜索关键词:', e.detail.value);
    },
    goTo(page) {
      uni.navigateTo({ url: `/pages/${page}/${page}` });
    },
    gotoAnnouncements() {
      uni.navigateTo({ url: '/pages/commingsoon/commingsoon' });
    },
    gotoInstitutions() {
      uni.navigateTo({ url: '/pages/commingsoon/commingsoon' });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: #fff;
  border: #ddd 1rpx solid;
  border-radius: 30rpx;
}

.search-input {
  flex: 1;
  padding: 10rpx 20rpx;
  font-size: 28rpx;
}

.search-btn {
  background-color: #007aff;
  color: white;
  padding: 5rpx 20rpx;
  border-radius: 20rpx;
  font-size: 28rpx;
}

.search-icon{
	height: 40rpx;
	width: 40rpx;
	padding: 15rpx 0 0 0;
	margin: 0 5rpx;
}

.banner-swiper {
  height: 300rpx;
  margin: 20rpx 0;
}

.banner-image {
  width: 100%;
  height: 100%;
  border-radius: 20rpx;
}

/* 快捷功能入口 */
.quick-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20rpx;
  background-color: #fefefe;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
  margin: 20rpx 0;
}

/* 单个功能按钮 */
.action-item {
  width: 160rpx;
  height: 160rpx;
  display: flex;
  background-color: #fff;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 20rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 10rpx rgba(0,0,0,0.06);
  padding: 15rpx;
  box-sizing: border-box;
  transition: transform 0.2s ease;
}

.action-item:active {
  transform: scale(0.96);
  box-shadow: 0 6rpx 12rpx rgba(0,0,0,0.1);
}

/* 图标统一大小 */
.action-icon {
  width: 64rpx;
  height: 64rpx;
  margin-bottom: 8rpx;
}

/* 文字样式（适配小按钮） */
.action-text {
  font-size: 24rpx;
  color: #333;
  text-align: center;
  line-height: 32rpx;
  max-height: 64rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1px solid #eee;
}

.star-icon {
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.section-more {
  color: #007aff;
  font-size: 28rpx;
}

.announcement-card {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 20rpx;
  margin: 20rpx 0;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
}

.announcement-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.announcement-date {
  font-size: 24rpx;
  color: #999;
}

.institution-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 20rpx;
}

.institution-item {
  width: 200rpx;
  text-align: center;
  margin-bottom: 30rpx;
}

.institution-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-bottom: 10rpx;
}

.institution-name {
  font-size: 26rpx;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>